<template>
	<navigator url="/pages/book-add/book-add">
		<button class="add-book-button" type="primary">新增图书</button>
	</navigator>
	<view class="book-list">
		<view class="book-item row" v-for="item in bookList" :key="item.id">
			<image class="book-cover" src="../../static/ic_public_cover.png"></image>
			<view class="book-info column">
				<text class="book-name">书名：{{item.bookname}}</text>
				<text class="book-author">作者：{{item.author}}</text>
				<text class="book-publisher">出版社：{{item.publisher}}</text>
				<view class="book-options row">
					<button class="book-options-button" type="primary" size="mini">查看</button>
					<button class="book-options-button" type="warn" size="mini">删除</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onPullDownRefresh,
		onShow
	} from '@dcloudio/uni-app'
	// 获取-图书列表
	const bookList = ref([])
	const getBookList = async () => {
		// 开启 loading 动画效果
		uni.showLoading({
			title: '数据加载中...'
		})
		// async await 异步 等待 网络请求
		const res = await uni.request({
			method: 'GET',
			url: 'https://hmajax.itheima.net/api/books',
			data: {
				creator: 'AAA东海龙宫批发厂'
			}
		})
		console.log(res)
		// 保存后端返回的数据
		bookList.value = res.data.data
		// 关闭 loading 动画效果
		uni.hideLoading()
	}

	getBookList()
	// 页面显示，重新获取最新列表数据
	onShow(() => {
		getBookList()
	})
	// 下拉刷新
	onPullDownRefresh(async () => {
		// 重新获取图书列表
		await getBookList()
		// 停止下拉刷新
		uni.stopPullDownRefresh()
	})
</script>

<style lang="scss">
	.add-book-button {
		background-color: $uni-color-primary;
		margin: 20rpx;
	}

	.book-list {
		.book-item {
			padding: 20rpx;

			&:not(:last-child) {
				border-bottom: 1rpx solid #ddd;
			}
		}

		.book-cover {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
		}

		.book-options {
			margin-top: auto;
		}

		.book-options-button {
			margin: 0;
			margin-right: 20rpx;
		}
	}
</style>